import React from 'react';
import CustomerStream from './CustomerStream';
import OtherStream from './OtherStream';

import './styles/video_container.less';

interface VideoContainerProps {
	layout?: string;
	width?: string;
	height?: string;
	callMediaType: string;
	hangup?: () => void;
}

const VideoContainer = (props: VideoContainerProps) => {
	const { layout, width, height, callMediaType, hangup } = props;

	return (
		<div className={layout === 'full' ? 'up-down-video-container' : 'video-container'} style={{ width: width || '100%', height: height }} id="zco-agent-widget-up-down-video-container">
			<CustomerStream layout={layout} width={width} height={height} callMediaType={callMediaType} />
			<OtherStream layout={layout} width={width} height={height} hangup={hangup} />
		</div>
	);
};

export default VideoContainer;
